<template>
  <div>
    <div ref="side" class="side">
      <li
        @touchstart="touchstart(item)"
        @touchmove="touchmove"
        @touchend="touchend"
        v-for="(item, index) in initBrand"
        :key="index">
        {{ item }}
      </li>
    </div>
    <div v-show="flag" class="toast">
      {{ text }}
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  props: ["letter"],
  data() {
      return {
          text: "",
          flag: false
      }
  },
  computed: {
    ...mapState(["initBrand"]),
  },
  methods: {
    touchstart(key) {
      this.text = key
      this.flag = true
      // 设置当前位置
      document.documentElement.scrollTop =
        this.letter["side" + key][0].offsetTop;
    },
    touchmove({ touches }) {
      // window.innerHeight
      // 440px
      let sideH = this.$refs.side.clientHeight;
      let height = (window.innerHeight - sideH) / 2;
      let topH = touches[0].clientY - height;
      let index = Math.floor(topH / (sideH / this.initBrand.length));
      if (index < 0) {
        index = 0;
      } else if (index >= this.initBrand.length - 1) {
        index = this.initBrand.length - 1;
      }
      this.text = this.initBrand[index]
      document.documentElement.scrollTop =
        this.letter["side" + this.initBrand[index]][0].offsetTop;
    },
    touchend() {
      this.flag = false
    },
  },
};
</script>

<style lang="scss" scoped>
.side {
  position: fixed;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  color: #666;
  li {
    height: 40px;
    padding: 0 20px;
  }
}
.toast {
  text-align: center;
  line-height: 140px;
  color: #fff;
  font-weight: 600;
  font-size: 40px;
  position: fixed;
  top: 500px;
  left: 305px;
  width: 140px;
  height: 140px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  z-index: 2000;
}
</style>